<template>
	<view class="container pr" style="overflow-x: hidden;">
		<view class="pa t_94 l_0 r_0 b_0 zbi_10" style="background: rgba(255,255,255,0.4);"
			v-if="dataInfo.dealerAuditStatus==1||dataInfo.dealerAuditStatus==3">
			<view class="mt_8 mlr_12 fx aic jcb height_40 plr_12 br_8" style="background: #D3EACD;color: #4ABC2D;"
				v-if="dataInfo.dealerAuditStatus==1" @click="handleUrl('/pages/account/pages/data')">
				资料审核中~请耐心等待
				<u-icon name="arrow-right" color="#4ABC2D" size="32rpx"></u-icon>
			</view>
			<view class="mt_8 mlr_12 fx aic jcb height_40 plr_12 br_8" style="background: #FFEEE9;color: #FE5A1C;"
				v-else @click="handleUrl('/pages/account/pages/data')">
				审核未通过，请重新提交
				<u-icon name="arrow-right" color="#FE5A1C" size="32rpx"></u-icon>
			</view>
		</view>
		<!-- <view class="pf t_0 l_0 r_0 height_94 zbi_9" style="overflow-x: hidden;" v-if="appType===base.USER_TYPE">
			<view class="pa top_circle_wrap">
				<view class="pa b_0 l_0 r_0 mlr_auto">
					<image class="w100 h100 pa l_0 b_0 zi_1" src="@/static/images/vip_bg.png" mode=""></image>
					<view class="pr plr_12 h100 zi_2 fx aic jcb fz_12" style="color:#FFF8EE">
						尊享会员
						<view class="fx aic">
							可获邀请用户消费的20%积分及10%金豆
							<u-icon name="arrow-right" color="#FFF8EE" size="24rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="height_94 fx aic jcb pl_20 pr_12 box pr zbi_9 bc_primary">
			<view class="w100 fx aic jcb"
				@click="()=>isDealer?handleUrl('/pages/account/pages/data'):dataInfo.customerId?handleUrl('/pages/person/pages/info'):bindLogin()">
				<view class="pa top_circle_wrap" v-if="showVip&&vipData&&dataInfo.memberLevel">
					<view class="pa b_0 l_0 r_0 mlr_auto" @click.stop="handleVip">
						<image class="w100 h100 pa l_0 b_0 zi_1" src="@/static/images/vip_bg.png" mode=""></image>
						<view class="pr plr_12 h100 zi_2 fx aic jcb fz_12" style="color:#FFF8EE">
							<image class="width_74 height_26" :src="levelImgDir[dataInfo.memberLevel]" mode=""></image>
							<view class="fx aic" v-if="dataInfo.memberLevel>1">
								可获邀请用户消费的{{memberLevelData.integralRatio||0}}%积分及{{memberLevelData.currencyRatio||0}}%金豆
								<u-icon name="arrow-right" color="#FFF8EE" size="24rpx"></u-icon>
							</view>
							<view class="fx aic" v-else>
								普通会员积分达到{{ordinaryIntegral||0}}积分则可成为尊享会员
								<u-icon name="arrow-right" color="#FFF8EE" size="24rpx"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="fx aic">
					<image class="width_56 height_56 br50 mr_12" :src="getAvatar" mode="aspectFit">
					</image>
					<view>
						<view class="fz_16 fb fc_fff">
							{{getUserName}}
						</view>
						<view class="mt_4 fz_12 fc_fff" v-if="dataInfo.customerId">
							ID：{{dataInfo.customerId||''}}
						</view>
						<view class="mt_4 fz_12 fc_fff" v-else>
							去登录
						</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#fff" size="24rpx"></u-icon>
			</view>
		</view>
		<view class="plr_12 pt_12 pb_12" :class="{'pt_64': showVip&&vipData}"
			:style="dataInfo.dealerAuditStatus==1||dataInfo.dealerAuditStatus==3?'margin-top:96rpx;':''">
			<view class="br_8 bc_fff pr fx aic">
				<view class="height_76 fx_1 fx fx_col aic jcc" @click="handleUrl('/pages/person/pages/my_point')">
					<view class="fb fz_24">
						{{dataInfo.accountInfo.pointBalance||0}}
					</view>
					<view class="mt_6 fc_666 fz_12">
						当前积分
					</view>
				</view>
				<view class="pa l_0 r_0 mlr_auto height_16 width_1 bc_999" v-if="appType!=base.ADMIN_TYPE"></view>
				<view class="height_76 fx_1 fx fx_col aic jcc" v-if="appType!=base.ADMIN_TYPE"
					@click="handleUrl('/pages/person/pages/my_coin')">
					<view class="fb fz_24">
						{{dataInfo.accountInfo.youJiaBalance||0}}
					</view>
					<view class="mt_6 fc_666 fz_12">
						当前金豆
					</view>
				</view>
			</view>
			<view class="br_8 bc_fff mt_8 ptb_12 plr_16">
				<view class="fx aic jcb">
					<view class="fb">
						我的订单
					</view>
					<view class="fc_999 fx aic" @click="handleUrl('/pages/person/pages/order')">
						<text class="mr_4">全部订单</text>
						<u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
					</view>
				</view>
				<view class="fc mt_16">
					<view class="fx fx_nw jcb">
						<view class="order_item_list fx fx_col aic pr"
							@click="handleUrl('/pages/person/pages/order?status=1')">
							<view class="pr">
								<image class="width_28 height_28" src="@/static/images/user_order_1.png" mode="">
								</image>
								<view class="badge">
									<u-badge numberType="limit" bgColor="#FE0000" max="99"
										:value="topOrderData.unConfirmCount"
										v-if="topOrderData.unConfirmCount"></u-badge>
								</view>
							</view>
							<view class="fz_12 fc_666 mt_8 fc">
								待确认
							</view>
						</view>
						<view class="order_item_list fx fx_col aic pr"
							@click="handleUrl('/pages/person/pages/order?status=2')">
							<view class="pr">
								<image class="width_28 height_28" src="@/static/images/user_order_2.png" mode="">
								</image>
								<view class="badge">
									<u-badge numberType="limit" bgColor="#FE0000" max="99"
										:value="topOrderData.unPaidCount" v-if="topOrderData.unPaidCount"></u-badge>
								</view>
							</view>
							<view class="fz_12 fc_666 mt_8 fc">
								待付款
							</view>
						</view>
						<view class="order_item_list fx fx_col aic pr"
							@click="handleUrl('/pages/person/pages/order?status=3')">
							<view class="pr">
								<image class="width_28 height_28" src="@/static/images/user_order_3.png" mode="">
								</image>
								<view class="badge">
									<u-badge numberType="limit" bgColor="#FE0000" max="99"
										:value="topOrderData.unReceiveCount"
										v-if="topOrderData.unReceiveCount"></u-badge>
								</view>
							</view>
							<view class="fz_12 fc_666 mt_8 fc">
								待收货
							</view>
						</view>
						<view class="order_item_list fx fx_col aic pr"
							@click="handleUrl('/pages/person/pages/order?status=4')">
							<view class="pr">
								<image class="width_28 height_28" src="@/static/images/user_order_4.png" mode="">
								</image>
								<view class="badge">
									<u-badge numberType="limit" bgColor="#FE0000" max="99"
										:value="topOrderData.unInstallCount"
										v-if="topOrderData.unInstallCount"></u-badge>
								</view>
							</view>
							<view class="fz_12 fc_666 mt_8 fc">
								待安装
							</view>
						</view>
						<view class="order_item_list fx fx_col aic pr"
							@click="handleUrl('/pages/person/pages/aftersale_list')">
							<view class="pr">
								<image class="width_27 height_27" src="@/static/images/user_order_5.png" mode="">
								</image>
								<view class="badge">
									<u-badge numberType="limit" bgColor="#FE0000" max="99"
										:value="topOrderData.afterSaleCount"
										v-if="topOrderData.afterSaleCount"></u-badge>
								</view>
							</view>
							<view class="fz_12 fc_666 mt_8 fc">
								售后
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="br_8 bc_fff mt_8 ptb_12 plr_16">
				<view class="fb">
					常用功能
				</view>
				<view class="fc mt_16">
					<view class="featrue_list_wrap gridc_32 gridr_16">
						<button class="block_btn featrue_list_item fx fx_col aic pr" :style="[menuStyle(item)]"
							:open-type="(item.url=='contact'&&isLogin)?'contact':''" v-for="(item, key) in featureDir"
							:key="item.id" @click="handleClickFeatrue(item,key)">
							<u-badge :offset="[0,0]" :absolute="true" numberType="overflow" max="99" :value="item.total"
								v-if="item.total"></u-badge>
							<image class="width_36 height_36" :src="item.imgUrl" mode=""></image>
							<view class="fz_12 fc_666 mt_8 fc">
								{{item.title}}
							</view>
						</button>
					</view>
				</view>
			</view>
		</view>
		<!-- <Tabbar value="5" /> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		BASE
	} from '@/const/base.js'
	import api from '@/service/config/api.js'
	import {
		getStaticUrl
	} from '@/utils/index.js'
	const ossUrl = "https://bsl-app-images.oss-cn-beijing.aliyuncs.com/wechat-app/images"
	const featureDir = [{
			id: 1,
			title: '我的拼团',
			imgUrl: `${ossUrl}/menu_feature_1.png`,
			url: '/pages/person/pages/my_group'
		},
		{
			id: 2,
			title: '我的砍价',
			imgUrl: `${ossUrl}/menu_feature_2.png`,
			url: '/pages/person/pages/my_bargain'
		},
		{
			id: 3,
			title: '积分订单',
			imgUrl: `${ossUrl}/menu_feature_3.png`,
			url: '/pages/person/pages/integral_order'
		}, {
			id: 4,
			title: '优惠券',
			imgUrl: `${ossUrl}/menu_feature_4.png`,
			url: '/pages/person/pages/coupon'
		}, {
			id: 5,
			title: '红包记录',
			imgUrl: `${ossUrl}/menu_feature_5.png`,
			url: '/pages/person/pages/my_redpacket?type=2'
		}, {
			id: 6,
			title: '消息通知',
			imgUrl: `${ossUrl}/menu_feature_6.png`,
			url: '/pages/person/pages/news'
		}, {
			id: 7,
			title: '我的收藏',
			imgUrl: `${ossUrl}/menu_feature_7.png`,
			url: '/pages/person/pages/collection'
		}, {
			id: 8,
			title: '地址管理',
			imgUrl: `${ossUrl}/menu_feature_8.png`,
			url: '/pages/person/pages/address'
		}, {
			id: 10,
			title: '联系客服',
			imgUrl: `${ossUrl}/menu_feature_10.png`,
			url: 'contact'
		}, {
			id: 11,
			title: '意见反馈',
			imgUrl: `${ossUrl}/menu_feature_11.png`,
			url: '/pages/person/pages/feedback'
		},

		{
			id: 12,
			title: '评价',
			imgUrl: `${ossUrl}/menu_feature_12.png`,
			url: '/pages/person/pages/my_evaluate'
		}, {
			id: 14,
			title: '设置',
			imgUrl: `${ossUrl}/menu_feature_14.png`,
			url: '/pages/person/pages/setting'
		}
	]
	const featureDir1 = {
		id: 13,
		title: '工作台',
		imgUrl: `${ossUrl}/menu_feature_13.png`,
		url: '/pages/workbench/pages/index'
	}
	const featureDir2 = {
		id: 9,
		title: '指定物流',
		imgUrl: `${ossUrl}/menu_feature_9.png`,
		url: '/pages/person/pages/logistics'
	}
	const featureDir3 = {
		id: 15,
		title: '抽奖记录',
		imgUrl: `${ossUrl}/zhongjiangjilu.png`,
		url: '/pages/person/pages/Drawrecords'
	}
	const levelImgDir = {
		1: `${ossUrl}/vip_lv1_txt.png`,
		2: `${ossUrl}/vip_lv2_txt.png`,
		3: `${ossUrl}/vip_lv3_txt.png`,
		4: `${ossUrl}/vip_lv4_txt.png`,
	}
	// const levelImgDir = {
	// 	1: require('@/static/images/vip_lv1_txt.png'),
	// 	2: require('@/static/images/vip_lv2_txt.png'),
	// 	3: require('@/static/images/vip_lv3_txt.png'),
	// 	4: require('@/static/images/vip_lv4_txt.png'),
	// }
	export default {
		data() {
			return {
				base: BASE,
				featureDir: featureDir,
				levelImgDir,
				checkStutas: 0,
				dataInfo: {},
				topOrderData: {}, // 头部订单信息
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
				vipData: null, // vip信息
				memberLevelData: {}, // 等级信息 
				ordinaryIntegral: 0, // 达到尊享会员条件
				isLogin: false,
			}
		},
		computed: {
			...mapState(['appType', 'userType', 'functionRange']),
			getStaticUrl() {
				return (src) => getStaticUrl(src)
			},
			getAvatar() {
				if (this.dataInfo.avatar) {
					return this.getStaticUrl(this.dataInfo.avatar)
				}
				return require('@/static/images/avatar_empty.png')
			},
			showVip() {
				if (this.$store.state.userType < 4) {
					return false
				}
				if (this.$store.state.appType != this.$base.USER_TYPE) {
					return false
				}
				if (!this.vipData) {
					return false
				}
				if (!this.vipData.memberLevel) {
					return false
				}
				if (this.vipData.memberLevel < 1) {
					return false
				}
				if (this.vipData.memberLevel >= 1)
					return true
			},
			isDealer() {
				if (this.appType == this.$base.ADMIN_TYPE && this.functionRange == 1 && this.dataInfo && (this.dataInfo.dealerAuditStatus ==
						1 || this.dataInfo.dealerAuditStatus == 3)) {
					return true
				}
				return false
			},
			menuStyle() {
				return item => item.title == '设置' ? ({
					zIndex: 200
				}) : ({})
			},
			getUserName() {
				if (this.appType == this.$base.ADMIN_TYPE && this.functionRange == 1) {
					return this.dataInfo.nickName || this.dataInfo.dealerName || ''
				}
				return this.dataInfo.nickName || ''
			}
		},
		onLoad() {

		},
		onShow() {
			const platformInfo = uni.getStorageSync("platformInfo")

			this.isLogin = !!this.$storage.getItem('token')
			this.featureDir = JSON.parse(JSON.stringify(featureDir))
			if (this.appType == this.$base.ADMIN_TYPE && !this.featureDir.some(item => item.id == 9)) {
				this.featureDir.splice(8, 0, featureDir2)
			}
			if (this.appType == this.$base.ADMIN_TYPE && this.$store.state.userType > 4 && !this.featureDir.some(item =>
					item.id == 13)) {
				this.featureDir.splice(12, 0, featureDir1)
			}
			if (this.appType == this.$base.USER_TYPE && !this.featureDir.some(item =>
					item.id == 15)) {
				this.featureDir.splice(11, 0, featureDir3)
			}
			if (this.$storage.getItem('token')) {
				this.getData()
				this.gettopOrderData()
				this.getNewsData()
				this.$utils.getSetting()
			} else {
				Object.assign(this, {
					...this.$options.data()
				})
				if (this.appType == this.$base.USER_TYPE && !this.featureDir.some(item =>
						item.id == 15)) {
					this.featureDir.splice(11, 0, featureDir3)
				}
			}
		},
		mounted() {

		},
		methods: {
			bindLogin() {
				uni.navigateTo({
					url: "/pages/account/pages/login?backUrl=/pages/index/user"
				})
			},
			getData() {
				this.$utils.loading()
				api.get(this.$utils.getUserReq()).then(res => {
					console.log('获取用户信息')
					this.dataInfo = res.data
					console.log(this.dataInfo)
					if (this.appType == this.$base.USER_TYPE) {
						this.getVipData()
					}
				})
			},
			getVipData() {
				Promise.all([this.getVipInfoData(), this.getVipMemberData()]).then(() => {

				})
			},
			getVipInfoData() {
				return new Promise(resolve => {
					api.get('/user/api/user/getUserMemberInfo').then(res => {
						this.vipData = res.data
					}).finally(() => {
						resolve()
					})
				})
			},
			getVipMemberData() {
				return new Promise(resolve => {
					api.get('/user/api/user/memberSet').then(res => {
						if (this.dataInfo.memberLevel)
							this.memberLevelData = res.data[this.dataInfo.memberLevel - 1]
						this.ordinaryIntegral = res.data[1].ordinaryIntegral
					}).finally(() => {
						resolve()
					})
				})
			},
			gettopOrderData() {
				api.get('/order/api/order/data', {}, {
					noToast: true,
					noHideLoading: true,
				}).then(res => {
					this.topOrderData = res.data
				})
			},
			handleClickFeatrue(item, index) {
				this.$utils.permis(false).then(() => {
					if (item.url == 'contact')
						return
					if (item.url) {
						uni.navigateTo({
							url: item.url
						})
					}
				})

			},
			handleUrl(url) {
				this.$utils.permis(false).then(() => {
					uni.navigateTo({
						url
					})
				})
			},
			getNewsData() {
				api.get('/user/tMyNotice/total').then(res => {
					if (res.data) {
						const index = this.featureDir.findIndex(item => item.id == 6)
						this.$set(this.featureDir[index], 'total', res.data)
					}
				})
			},
			handleVip() {
				this.$utils.permis(false).then(() => {
					uni.navigateTo({
						url: `/pages/person/pages/vip?currentLv=${this.dataInfo.memberLevel?this.dataInfo.memberLevel-1:0}`
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 0;
	}
</style>

<style lang="scss" scoped>
	// .order_item_list {
	// 	width: calc((100vw - 48rpx - 64rpx - 280rpx) / 5);
	// }
	.featrue_list_wrap {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	.top_circle_wrap {
		bottom: -104rpx;
		width: 4000rpx;
		height: 4000rpx;
		left: calc(-2000rpx + 50vw);
		border-radius: 50%;
		background: #F08519;
		z-index: -1;
		overflow: hidden;

		&>view {
			width: 702rpx;
			height: 112rpx;
		}
	}

	.badge {
		position: absolute;
		top: -4rpx;
		right: -12rpx;
	}
</style>